<template>
    <div>
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
</el-breadcrumb><br/><br/>
<el-card class="box-card">

<el-form :inline="true" class="demo-form-inline">
    <el-form-item label="选择商品分类:">
    <el-cascader
    v-model="value"
    :options="cate"
    @change='cat'
    :props="{value:'cat_id',label:'cat_name'}"
    >
    </el-cascader>
    </el-form-item>
  </el-form>
    <el-tabs v-model="active" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="many">
        <el-button :disabled='lock' @click='show=true' type='primary' style='float:left'>添加参数</el-button>
        <el-table
    :data="manyList"
    border
    style="width: 100%">
    <el-table-column
      type="expand"
      width="150">
      <template slot-scope='scope'>
        <el-tag
          :key="tag"
          v-for="(tag,index) in scope.row.attr_vals"
          closable
          :disable-transitions="false"
          @close="handleClose(scope.row,index)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="scope.row.inputVisible"
          v-model="scope.row.inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm(scope.row)"
          @blur="handleInputConfirm(scope.row)" 
        >
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="attr_name"
      label="参数名称"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" @click='edit(scope.row)'>编辑</el-button>
        <el-button type="danger" @click='del(scope.row)' icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    
    </el-tab-pane>
     <el-tab-pane label="静态参数" name="only">
        <el-button :disabled='lock' @click='show=true'  type='primary' style='float:left'>添加属性</el-button>
        <el-table
    :data="onlyList"
    border
    style="width: 100%">
    <el-table-column
      type="expand"
      width="150">
      <template slot-scope='scope'>
        <el-tag
          :key="tag"
          v-for="(tag,index) in scope.row.attr_vals"
          closable
          :disable-transitions="false"
          @close="handleClose(scope.row,index)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="scope.row.inputVisible"
          v-model="scope.row.inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm(scope.row)"
          @blur="handleInputConfirm(scope.row)" 
        >
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="attr_name"
      label="参数名称"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" @click='edit(scope.row)'>编辑</el-button>
        <el-button type="danger" @click='del(scope.row)' icon="el-icon-delete" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
  </el-tabs>

  <!-- 添加 -->

  <el-dialog :title="flag?'添加动态参数':'添加静态属性'" :visible.sync="show">
  <el-form :model="form" ref="formName">
    <el-form-item :label="flag?'动态参数':'静态属性'" prop='attr_name'>
      <el-input v-model="form.attr_name"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="show = false">取 消</el-button>
    <el-button type="primary" @click="addCate2">{{flag?"添加动态参数":"添加静态属性"}}</el-button>
  </div>
</el-dialog>


<!-- 修改 -->
<el-dialog :title="flag?'修改动态参数':'修改静态属性'" :visible.sync="editshow">
  <el-form :model="form" ref="formName">
    <el-form-item :label="flag?'动态参数':'静态属性'" prop='attr_name'>
      <el-input v-model="form.attr_name"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="show = false">取 消</el-button>
    <el-button type="primary" @click='doEdit'>{{flag?"修改动态参数":"修改静态属性"}}</el-button>
  </div>
</el-dialog>


</el-card>
    </div>
</template>

<script>
import { categories,addCate1,delCate1, goodcategories,upcategories } from "../api/api.js";
export default {
  data() {
    return {
      // dynamicTags: ["标签一", "标签二", "标签三"],
      // inputVisible: false,
      // inputValue: "",
      lock: true,
      show:false,
      cate: [],
      flag:true,
      value: "",
      catId:0,
      editshow:false,
      active: "many",
      manyList: [],
      onlyList: [],
      form:{
         attr_name:'',
      }
    };
  },
  mounted() {
    this.getList();
    this.table();
  },
  methods: {
    async getList() {
      let res = await categories();
      this.$message.success("获取商品列表成功");
      console.log(res);
      this.cate = res.data;
    },
    async table() {
      console.log("xx", this.value);
      if (this.value.length != 3) {
        this.value = [];
        return false;
      }
      let cateid = this.value[2];
      console.log("aa", cateid);
      let res = await goodcategories(this.value[this.value.length - 1],
        this.active);
      console.log(res);
      if (res.meta.status == 200) {
        res.data.forEach(item => {
          item.attr_vals=item.attr_vals?item.attr_vals.split(' '):[]
          item.inputValue = ''
          item.inputVisible=false
        });
        this.manyList = res.data;
        console.log("xxxxccc", this.manyList);
        this.onlyList = res.data;
      }
    },
    edit(row){
       this.editshow=!this.editshow
       this.form.attr_name=row.attr_name
       this.catId=row.attr_id
       this.form.attr_sel=row.attr_sel
       this.form.attr_vals=row.attr_vals.join(' ');
    },
    doEdit(row){
        this.$refs['formName'].validate(async (valid) => {
          if (valid) {
            let res=await upcategories(this.value[this.value.length-1],this.catId,this.form)
            console.log('qwe',res)
            if(res.meta.status==200){
              this.$message.success(res.meta.msg)
              this.editshow=false
              this.table();
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
   handleClick(){
      this.table()
   },

    async handleClose(row,index) {
      row.attr_vals.splice(index,1);
      let user = {
        attr_name: row.attr_name,
        attr_sel: row.attr_sel,
        attr_vals: row.attr_vals.splice(index, 1).join(" ")
      };
      //提交接口
      let res=await upcategories(
        this.value[this.value.length - 1],
        row.attr_id,
        user
      )
      if (res.meta.status === 200) {
        this.$message.success('修改参数项成功！')
      }
    },

    showInput(row) {
      row.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
 
    handleInputConfirm(row) {
      console.log('sss',row)
      let inputValue = row.inputValue;
      if (inputValue) {
        row.attr_vals.push(inputValue);
      }
      row.inputVisible = false;
      row.inputValue = "";
    },
    
    cat(){
      if(this.value.length==3){
         this.table()
         this.lock=false
      }else{
        this.lock=true
        
      }
    },

    //添加
    addCate2(){
      this.$refs['formName'].validate(async (valid) => {
          if (valid) {
            this.form.attr_sel=this.active
            let res=await addCate1(this.value[this.value.length - 1], this.form)
            console.log('asd',res)
            if(res.meta.status==201){
              this.$message.success(res.meta.msg)
              this.show=false
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //删除
      del(row){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示').then(async () => {
             let res=await delCate1(this.value[this.value.length-1],row.attr_id)
             if(res.meta.status==200){
               this.$message.success(res.meta.msg)
               this.table()
             }
        }) 
       
      }
    }
    
  
};
</script>
<style lang='scss' scoped >
</style>
